<.flash_group flash={@flash} />
<div class="flex items-center justify-center min-h-screen dark:bg-zinc-900">
  <div>
    <div class="flex justify-center">
      <pre id="ascii-art" class="text-xl font-mono text-zinc-800 dark:text-zinc-200"></pre>
    </div>
    <p
      id="success-message"
      class="text-[2rem] mt-4 font-mono leading-10 tracking-tighter text-zinc-900 dark:text-zinc-100"
    >
    </p>
  </div>
</div>

<script>
     const asciiArt = `
   _____                  _
  / ____|                (_)
  | (___  ___  __ _ _   _ _ _ __
  \\___ \\ / _ \\/ _\` | | | | | '_ \\
  ____) |  __/ (_| | |_| | | | | |
  |_____/ \\___|\__, |\\__,_|_|_| |_|
                 | |
                 |_|
                    `;

     const asciiArtElement = document.getElementById('ascii-art');
     const successMessageElement = document.getElementById('success-message');

     function typeText(element, text, duration) {
       const lines = text.split('\n');
       const totalChars = text.length;
       const msPerChar = duration / totalChars;

       let currentLine = 0;
       let currentChar = 0;

       function typeChar() {
         if (currentLine < lines.length) {
           if (currentChar < lines[currentLine].length) {
             element.innerHTML += lines[currentLine][currentChar];
             currentChar++;
           } else {
             element.innerHTML += '<br>';
             currentLine++;
             currentChar = 0;
           }
           setTimeout(typeChar, msPerChar);
         }
       }

       typeChar();
     }

     typeText(asciiArtElement, asciiArt, 3000);
</script>
